<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
			<div v-if="flag">
				<h3>分销等级
					<el-button @click="addGoodsFn" plain type="primary" v-if='counter.btnsObj.addFlag'>
						{{counter.btnsObj.addName}}
					</el-button>
				</h3>
				<el-table :data="tableData" style="width: 100%" height="65vh">
					<el-table-column label="等级" width="160">
						<template #default="{row}">
							{{Number(row.levelGrade)+1}}
						</template>
					</el-table-column>
					<el-table-column prop="levelName" label="等级名称" width="160" />
					<el-table-column prop="firstLevel" label="一级分销比例" width="160">
					
					</el-table-column>
					<el-table-column prop="secondLevel" label="二级分销比例" width="160">
					
					</el-table-column>
					<el-table-column prop="upscoreType" label="升级条件" width="160">
						
					</el-table-column>
					<el-table-column  label="操作" width="160px">
						<template #default="{row}">
							<a class="mya" @click="makechange(row)">编辑</a>
							<a class="mya" type="danger" @click="delate(row)">删除</a>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
				
				
				<el-dialog v-model="dialogFormVisible" title="提示" width="500">
				    <el-form >
						<div style="text-align: center;">
							<p>确认删除该数据吗?</p>
						</div>
				    </el-form>
					<template #footer>
					  <div class="dialog-footer">
					    <el-button @click="dialogFormVisible = false">取消</el-button>
					    <el-button type="primary" @click="sure">
					      确定
					    </el-button>
					  </div>
					</template>
				  </el-dialog>
			</div>
				  <ChangeLevel v-else  @update-message="handleMessageUpdate"></ChangeLevel>
			</el-main>
	    </el-container>
	</div>
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import { ref,onMounted,reactive} from "vue";
	import {
		disLevellist,
		delatelevel,
		detaillevel
		} from "@/api"
	import ChangeLevel from "./ChangeLevel.vue"
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from '../stores/counter';
	// import { el} from "element-plus/es/locale";
	import { ElMessage } from "element-plus";
	let route=useRoute();
	let router=useRouter();
	let counter=useCounterStore();
	counter.btns=route.meta.btns
	
	const flag=ref(true)
	let pageIndex=ref(1);
	let pageSize=10;
	let total=ref(0)
	const tableData = ref([])
	//获取分销等级列表
	const getdisLevellist = async ()=>{
		let res=await disLevellist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		// console.log("分销等级",res)
		tableData.value=res.list
		total.value=res.pageCount
	}
	const dialogFormVisible=ref(false)
	//点击删除
	let rows=reactive({})
	const delate=(row)=>{
		dialogFormVisible.value=true
		rows=row
		// console.log(rows);
		// console.log(rows.distributionLevelId);
		// console.log("distributionLevelId",rows.distributionLevelId);
	}
	//确认删除
	const sure= async()=>{
		// console.log("distributionLevelId",rows.distributionLevelId);
		let res=await delatelevel(rows.distributionLevelId)
		ElMessage({
		    message:"删除成功",
		    type: 'success',
		})
		// console.log("删除某条分销等级",res)
		dialogFormVisible.value=false
		getdisLevellist()
	}
	//编辑分销等级//查看编辑某条分校等级详情
	const makechange=async (row)=>{
		flag.value=false
		// let res=await detaillevel(rows.distributionLevelId)
		// console.log("查看某条分销等级详情",res)
		sessionStorage.setItem("leveldetail",JSON.stringify(row))
	}
	const addGoodsFn=()=>{
		flag.value=false
	}
	function handleMessageUpdate (newMessage) {
		flag.value = newMessage;
		getdisLevellist()
	}
	//分页
	const changePage=(page)=>{
		pageIndex.value=page;
		trderList()
	}
	onMounted(()=>{
		getdisLevellist()
	})
	
</script>

<style scoped lang="less">
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.mya{
		display: inline-block;
		margin-right: 10px;
		color: #4b5db9;
		text-align: center;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
		}
	}
	h3{
		// margin-left: 50px;
		margin-bottom: 20px;
		// margin-top: 20px;
		display: flex;
		justify-content: space-between;
		margin-right: 100px;
	}
</style>